<template>
  <div class="container">
    <div class="header" :style="{backgroundImage:'url('+store.mb_title_img+')'}">
      <div class="content-wrapper">
        <div class="avatar" @click="goStoreabout">
          <img :src="store.store_avatar" />
        </div>
        <div class="content">
          <div class="store_name">{{store.store_name}}</div>
          <div
            v-if="(store.is_platform_store && config.business_licence) || store.business_licence_number_electronic"
          >
            <i @click="imageVisible=true" class="iconfont">&#xe621;</i>
          </div>
        </div>
        <div class="follow_panel">
          <div class="follow_button" @click="toggleFavorite">
            <i class="iconfont" :class="{'active':store.is_favorate}" v-html="favoriteIco"></i>
            {{favoriteName}}
          </div>
          <div class="follow_number">{{store.store_collect}}人收藏</div>
        </div>
        <div class="header-more iconfont">
          <div class="goIndex" @click="goIndex">X</div>
          <i class="nav-icon iconfont" @click="goNews">&#xe6ce;</i>
          <!-- <span>9</span> -->
          <span @click="goNews" v-if="user.new_mail_count">{{user.new_mail_count}}</span>
        </div>
        <!-- <i class="header-more iconfont" @click="popupMore">&#xe680;<div v-if="showDot" class="dot"></div></i> -->
      </div>
      <div class="background">
        <img v-if="store.store_logo" v-lazy="store.store_logo" width="100%" height="100%" />
        <img v-else v-lazy="store.store_logo" width="100%" height="100%" />
      </div>
    </div>
    <!-- <div class="header" :style="{backgroundImage:'url('+store.mb_title_img+')'}">
      <div class="content-wrapper">
        <div class="avatar" @click="goStoreabout">
          <img :src="store.store_avatar" />
        </div>
        <div class="content">
          <div class="store_name">
            <span>{{store.store_name}}</span>
            <img @click="imageVisible=true" src="../../../assets/image/business_license.png" alt="">
          </div>
          <div
            v-if="(store.is_platform_store && config.business_licence) || store.business_licence_number_electronic"
            
          >
           <div class="follow_number">{{store.store_collect}}人收藏</div>
          </div>
        </div>
        <div class="follow_panel">
          <div class="follow_button" @click="toggleFavorite">
            <img style="margin: 0 0 0.2rem 0" src="../../../assets/image/collection.png" alt="">
            {{favoriteName}}
          </div>
          <div class="follow_button alert">
            <img src="../../../assets/image/more.png" @click="popupMore" alt="">
            <img class="imgs" style="margin: 0 0.5rem;width:1px;height:0.65rem" src="../../../assets/image/xz.png" alt="">
            <img @click="back" src="../../../assets/image/close.png" alt="">
          </div>
        </div>
      </div>
      <div class="background">
        <img v-if="store.store_logo" v-lazy="store.store_logo" width="100%" height="100%" />
        <img v-else v-lazy="store.store_logo" width="100%" height="100%" />
      </div>
    </div>-->
    <header-more :indexshow="false" v-show="popupVisible" :showDot="showDot"></header-more>

    <mt-swipe
      id="mt-5"
      class="mt-5"
      v-if="store.mb_sliders && store.mb_sliders.length && !is_show"
      v-bind:style="getBannerStyle"
      :showIndicators="isShowIndicators"
    >
      <mt-swipe-item v-for="(item, index) in banner" :key="index">
        <img :style="getBannerStyle" v-lazy="item.imgUrl" @click="goAd(item)" />
      </mt-swipe-item>
    </mt-swipe>
    <store-class
      :classifications="store_class"
      :imgSrc="advertisement"
      :whole="whole"
      v-if="!is_show"
    ></store-class>
    <!-- <store-product-list :items="rec_goods_list" v-if="rec_goods_list && rec_goods_list.length > 0 && !is_show"></store-product-list> -->
    <!-- <storeabout v-if="is_show"></storeabout> -->
    <common-store-footer :store_id="store.store_id"></common-store-footer>
    <mt-popup v-model="imageVisible" popup-transition="popup-fade" class="middle-popup">
      <img
        v-if="store.business_licence_number_electronic"
        :src="store.business_licence_number_electronic"
      />
      <!--        <img v-if="store.is_platform_store && config.business_licence" :src="config.business_licence">-->
    </mt-popup>
    <!-- <popup v-if="isShow"></popup> -->
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import { Toast } from "mint-ui";
import CommonStoreFooter from "../common/CommonStoreFooter";
import { getStoreInfo } from "../../../api/homestoredetail";
import { getChatCount } from "../../../api/memberChat";
import Popup from "../../Popup";
import {
  addFavoriteStore,
  delFavoriteStore,
} from "../../../api/memberFavorite";
// import StoreProductList from "./StoreProductList";
import StoreClass from "./StoreClass";
import Storeabout from "../storeabout/Storeabout";
import HeaderMore from "../../HeaderMore";
import {
  getStoreGoodsClass,
  getStoreGoodsList,
  getstoreInfo,
} from "../../../api/homestoredetail";
import { getMemberIndex } from "../../../api/member";
export default {
  name: "Storedetail",
  data() {
    return {
      isShow: "",
      banner: "",
      whole: [],
      article_title: "",
      imageVisible: false,
      store: {
        store_id: this.$route.query.id ? this.$route.query.id : "",
      },
      rec_goods_list: false,
      popupVisible: false, // 弹出更多
      showDot: false,
      is_show: false,
      store_class: [],
      advertisement: "",
      user: {},
    };
  },
  components: {
    HeaderMore,
    // StoreProductList,
    CommonStoreFooter,
    Storeabout,
    StoreClass,
    Popup,
  },
  computed: {
    ...mapState({
      config: (state) => state.config.config,
      token: (state) => state.member.token,
      isOnline: (state) => state.member.isOnline,
    }),
    getBannerStyle: function () {
      const { width } = window.screen;
      let itemWidth = width;
      let itemHeight = width * (94.0 / 188.0);
      return {
        width: itemWidth + "px",
        height: itemHeight + "px",
      };
    },
    isShowIndicators() {
      if (this.store.mb_sliders && this.store.mb_sliders.length > 1) {
        return true;
      }
      return false;
    },
    favoriteIco() {
      return this.store.is_favorate ? "&#xe64d;" : "&#xe64e;";
    },
    favoriteName() {
      return this.store.is_favorate ? "已收藏" : "收藏";
    },
  },
  created() {
    if (!this.store.store_id) {
      Toast({
        message: "没有找到该店铺",
        // position: "bottom",
        duration: 2000,
      });
      this.$router.go(-1);
      // }, 1000);
      return false;
    }
    this.getstoreInfo();
    if (this.isOnline) {
      getMemberIndex().then(
        (response) => {
          if (response && response.result.member_info) {
            this.user = response.result.member_info;
            console.log(this.user.new_mail_count);
          }
        },
        (error) => {}
      );
    }
    if (this.$route.query.share_id) {
      localStorage.setItem("share_id", this.$route.query.share_id);
      localStorage.setItem("store_id", this.$route.query.id);
      localStorage.removeItem("goods_id");
    }
    getStoreInfo(this.store.store_id, this.token)
      .then((res) => {
        console.log(res);
        if (res.code == "10000") {
          this.banner = res.result.store_info.mb_sliders;
          this.store = res.result.store_info;
          this.article_title = res.result.store_info.seller_name;
          this.rec_goods_list = res.result.rec_goods_list;
          if (this.store.is_platform_store) {
            this.fetchConfig({}).then(
              (response) => {},
              (error) => {
                Toast(error.message);
              }
            );
          }
        } else {
          Toast({
            message: "没有找到该店铺",
            // position: "bottom",
            duration: 2000,
          });
          this.$router.go(-1);
          return false;
        }
      })
      .catch((error)=> {
        // Toast(error.message);
        Toast({
            message: error.message,
            duration: 2000,
          });
          this.$router.go(-1);
          return false;
      });
    if (this.isOnline) {
      getChatCount().then((res) => {
        if (res.result) {
          this.showDot["chat"] = true;
        }
      });
    }
  },
  methods: {
    ...mapActions({
      fetchConfig: "fetchConfig",
    }),
    goAd(item) {
      if (item.link != "") {
        if (item.type === 2) {
          this.$router.push({
            name: "HomeGoodsdetail",
            query: { goods_id: item.link },
          });
        } else {
          window.location.href = item.link;
        }
      } else {
        return;
      }
    },
    goIndex() {
      this.$router.push({ name: "HomeIndex" });
    },
    goNews() {
      if (this.isOnline) {
        this.$router.push({ name: "MemberNoticeList" });
      } else {
        this.showLogin();
      }
    },
    showLogin() {
      this.$router.push({ name: "HomeMemberLogin" });
    },
    goStoreabout: function () {
      // this.is_show = true;
      this.$router.push({
        name: "HomeStoreabout",
        query: { id: this.$route.query.id },
      });
    },
    // 弹出更多
    popupMore() {
      if (!this.popupVisible) {
        this.popupVisible = true;
      } else {
        this.popupVisible = false;
      }
    },
    getstoreInfo() {
      getstoreInfo(this.store.store_id).then((res) => {
        console.log(res.result.store_info.mb_advs);
        this.store_class = res.result;
        this.advertisement = res.result.store_info.mb_advs;
      });
    },
    // back(){
    //   if(this.is_show){
    //     this.is_show = false;
    //   }else{
    //     this.$router.go(-1)
    //   }
    //   // this.is_show = false;
    // },
    collection() {
      getStoreInfo(this.store.store_id, this.token)
        .then((res) => {
          this.store = res.result.store_info;
        })
        .catch(function (error) {});
    },
    toggleFavorite() {
      console.log(!this.store.is_favorate);
      if (!this.store.is_favorate) {
        addFavoriteStore(this.store.store_id).then(
          (response) => {
            Toast(response.message);
            this.store.is_favorate = !this.store.is_favorate;
            this.collection();
          },
          (error) => {
            Toast(error.message);
          }
        );
      } else {
        delFavoriteStore(this.store.store_id).then(
          (response) => {
            Toast(response.message);
            this.store.is_favorate = !this.store.is_favorate;
            this.collection();
          },
          (error) => {
            Toast(error.message);
          }
        );
      }
    },
  },
};
</script>

<style scoped>
#mt-5 {
  margin: 0 !important;
  border-top: 1px solid #f5f5f5;
}
.mint-button {
  border: none;
}
.container {
  background: #eeeff2;
}
.common-header {
  background: rgb(131, 136, 141);
  color: #ffffff;
  border-bottom: 1px solid #f5f5f5;
}
.dot {
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  background: red;
  border-radius: 50%;
  top: 0.2rem;
  right: 0;
}
.header {
  background: rgba(7, 17, 27, 0.5);
  color: #fff;
  overflow: hidden;
  position: relative;
  background-position: center;
  background-size: auto 100%;
}
.header .content-wrapper {
  -ms-flex-align: center;
  -webkit-box-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0.5rem 0.5rem;
  position: relative;
}
.header .content-wrapper .avatar {
  -ms-flex: 0 0 3rem;
  -webkit-box-flex: 0;
  flex: 0 0 3rem;
  margin-right: 0.4rem;
  width: 3rem;
}
.header .content-wrapper .avatar img {
  border-radius: 0.1rem;
  width: 3rem;
  height: 3rem;
}
.header .content-wrapper .content {
  position: relative;
  width: 8rem;
}
.header .content-wrapper .content .store_name {
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}
.follow_panel {
  position: absolute;
  top: 0.5rem;
  right: 2rem;
}
.follow_panel .follow_button {
  display: block;
  background: #e93b3d;
  border-radius: 2.5rem;
  margin-bottom: 0.7rem;
  padding: 0 0.4rem;
  line-height: 1.2rem;
  font-size: 0.6rem;
  color: #fff;
}
.follow_panel .follow_button i {
  line-height: 1.2rem;
}
.follow_panel .follow_number {
  text-align: center;
  line-height: 0.7rem;
  font-size: 0.5rem;
  color: #fff;
  margin-top: 0.1rem;
}
.header-more {
  width: 2rem;
  height: 2rem;
  /* line-height: 1.5rem; */
  position: absolute;
  top: 0.5rem;
  right: 0;
  color: #fff;
  text-align: center;
  font-size: 1rem;
}
.header .background {
  background: #2c3b53;
  -webkit-filter: blur(0.5rem);
  filter: blur(0.5rem);
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}
.middle-popup {
  width: 80%;
}
.middle-popup img {
  max-width: 100%;
}
.follow_button img {
  width: 0.55rem;
}
.goIndex {
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  /* list-style: 0 !important; */
}
/* .header {
  background: #3C7C45;
  color: #fff;
  overflow: hidden;
  position: relative;
  background-position: bottom center;
  background-size: cover;
}
.header .content-wrapper {
  -ms-flex-align: center;
  -webkit-box-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0.5rem 0.5rem;
  position: relative;
}
.header .content-wrapper .avatar {
  -ms-flex: 0 0 3rem;
  -webkit-box-flex: 0;
  flex: 0 0 3rem;
  margin-right: 0.4rem;
  width: 3rem;
}
.header .content-wrapper .avatar img {
  border-radius: 0.1rem;
  width: 3rem;
  height: 3rem;
}
.header .content-wrapper .content {
  position: relative;
}
.header .content-wrapper .content .store_name {
  font-size: 0.7rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}
.header .content-wrapper .content .store_name img{
  width: 0.7rem;
  height: 0.51rem;
  margin-left: 0.2rem;
}
.follow_panel {
  position: absolute;
  top: 1rem;
  right: 0.5rem;
  display: flex;
}
.follow_panel .follow_button {
  display: block;
  background: rgba(0,0,0,.5);
  padding: 0 0.4rem;
  line-height: 1.2rem;
  font-size: 0.55rem;
  color: #fff;
  text-align: center;
  width:3rem;
  height:1.25rem;
  border-radius:0.6rem;



}
.follow_panel .follow_button i {
  line-height: 1.2rem;
}
.follow_button img{
  width:0.55rem;
}
.content .follow_number {
  line-height: 0.7rem;
  font-size: 0.45rem;
  color: #fff;
  margin-top: 0.1rem;
}
.header-more {
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  position: absolute;
  top: 0.5rem;
  right: 0;
  color: #fff;
  text-align: center;
  font-size: 1rem;
}
.header .background {
  background: #2c3b53;
  -webkit-filter: blur(0.5rem);
  filter: blur(0.5rem);
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}
.middle-popup {
  width: 80%;
}
.middle-popup img {
  max-width: 100%;
} */

.alert {
  margin-left: 0.42rem;
}
.header-more i {
  font-size: 1.2rem;
}
.header-more span {
  position: absolute;
  top: 1.5rem;
  left: 0.2rem;
  z-index: 99;
  width: 15px;
  height: 15px;
  line-height: 15px;
  background: red;
  border-radius: 50%;
  font-size: 12px;
  color: #ffffff;
}
</style>
